<template>
  <div class="menu">
    <div class="drag" />
    <div class="container">
      <div class="LOGO" @click="router.push({ name: 'SearchSongMenuPager' })">
        <img :src="logo" />
        <span>Makka Pakka</span>
      </div>
      <div class="options">
        <div class="option level-1">搜索</div>
        <div :class="['option', { active: currentPage === 'SearchSongMenuPager' }]" @click="changeCurrentPage('SearchSongMenuPager')">
          <img :src="songMenu" />
          精选歌单
        </div>
        <div :class="['option', { active: currentPage === 'SearchPage' }]" @click="changeCurrentPage('SearchPage')">
          <img :src="search" />
          搜索结果
        </div>
        <div class="option level-1">我的音乐</div>
        <div :class="['option', { active: currentPage === 'NativeMusic' }]" @click="changeCurrentPage('NativeMusic')">
          <img :src="nativeMusic" />
          本地音乐
        </div>
        <div class="option level-1">
          创建的歌单
          <img :src="createMenuImg" @click="createMenu" />
        </div>
        <div :class="['option', { active: currentPage === name }]" @click="changeCurrentPage(name)" v-for="(name, i) in songMenuNameList" :key="i">
          {{ name }}
        </div>
      </div>
    </div>
  </div>
  <OperateMenu ref="createSongMenu" />
</template>

<script setup>
import { onMounted, ref, provide, onUnmounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
import { getSongMenuNameList } from '@/utils/songMenu';
import logo from '../../build/icon.png';
import search from '/menu/search.svg';
import songMenu from '/menu/songMenu.svg';
import nativeMusic from '/menu/nativeMusic.svg';
import createMenuImg from '/menu/createMenu.svg';

function changeCurrentPage(name) {
  switch (name) {
    case 'SearchSongMenuPager':
      router.push({ name });
      break;
    case 'SearchPage':
      router.push({ name: 'SearchPage', query: { keyword: localStorage.getObject('keyword') } });
      break;
    case 'NativeMusic':
      router.push({ name });
      break;
    default:
      router.push({ name: 'SongMenuPage', query: { menuName: name } });
  }
}

const createSongMenu = ref(null);
function createMenu() {
  createSongMenu.value.operateInfo.isShow = true;
  createSongMenu.value.operateInfo.songMenuName = '';
}

const songMenuNameList = ref([]);
function getMenuNameList() {
  songMenuNameList.value = getSongMenuNameList();
}
provide('getMenuNameList', getMenuNameList);
onMounted(() => {
  getMenuNameList();
});

const currentPage = ref('SearchSongMenuPager');
watch(
  () => route.fullPath,
  (newFullPath) => {
    if (!newFullPath.includes('songMenuPage')) {
      currentPage.value = route.name;
    } else {
      currentPage.value = new URLSearchParams(decodeURIComponent(newFullPath).split('?')[1]).get('menuName');
    }
  }
);

const updateMenuIntervalId = setInterval(() => {
  getMenuNameList();
}, 1000);
onUnmounted(() => {
  clearInterval(updateMenuIntervalId);
});
</script>

<style scoped lang="scss">
.menu {
  width: 220px;
  height: 100vh;
  padding: 0 10px;

  .drag {
    width: 100%;
    height: 70px;
    -webkit-app-region: drag;
  }

  .container {
    height: 66vh;
    border-radius: 10px;
    background-color: #f2f2f7;
    padding: 10px 0;
    transition: height 0.3s linear;

    .LOGO {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 50px;
      padding: 0 15px;
      font-size: 16px;
      font-weight: 700;
      img {
        width: 36px;
        height: 36px;
      }
    }

    .options {
      height: calc(100% - 60px);
      padding: 0 10px;
      overflow: auto;

      .option {
        display: flex;
        align-items: center;
        width: 100%;
        height: 40px;
        margin: 7px 0;
        padding: 0 20px;
        border-radius: 10px;
        font-size: 14px;
        transition: background-color 0.2s linear;
        &:hover {
          background-color: #ffffff;
        }
        img {
          width: auto;
          height: 20px;
          object-fit: contain;
          margin-right: 10px;
        }
      }
      .level-1 {
        justify-content: space-between;
        color: #aeaeaf;
        font-size: 12px;
        font-weight: 700;
        &:hover {
          background-color: #f2f2f7;
        }
      }
      .active {
        background-color: #017afe;
        color: #ffffff;
        &:hover {
          background-color: #017afe;
        }
      }
    }
  }
}
</style>
